<template>
	<!-- 添加验收详情 -->
  <view class="flex-col page">
    <view class="flex-col group">
      <view class="flex-col items-start section_1">
        <text class="text_1">{{this.title}}</text>
        <text class="text_2">{{this.ServiceTypeName}}</text>
      </view>
      <view class="flex-col section_2">
        <view class="flex-col">
          <text class="text_3">验收问题：</text>
          <view class="flex-col items-start text-wrapper">
			  <textarea name="" id="" cols="30" rows="10" placeholder="请输入回复内容…" v-model="replyCon"></textarea>
		</view>
          <view class="group_2">
            <shop-upload :maxCount="9" :fileList="fileList" @del="delectPic" @success='success'></shop-upload>
          </view>
        </view>
        <view class="flex-col items-center button" @click="sure"><text class="text_5">确认</text></view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    components: {},
    data() {
      return {
		  record:'',
		  fileList:[],
		  replyCon:'',
		  title:'',
		  ServiceTypeName:"",
		  id:'',
		  acceptanceServiceId:'',
		  acceptanceServiceTypeId:'',
		  acceptanceCategoryDetailsId:'',
		  rate:''
	  };
    },
	onLoad(option) {
		this.acceptanceServiceId = option.acceptanceServiceId
		this.acceptanceServiceTypeId = option.acceptanceServiceTypeId
		this.acceptanceCategoryDetailsId=option.acceptanceCategoryDetailsId
		this.getdate()
		this.rate =  uni.getStorageSync('rate');
	},
	created() {
		uni.startPullDownRefresh();
		setTimeout(function() {
			uni.stopPullDownRefresh();
		}, 1000);
	},
    methods: {
		getdate(){
	
			const acceptanceServiceTypeId = uni.getStorageSync('acceptanceServiceTypeId');
			const ids = uni.getStorageSync('ids');
			this.$http('other.getAcceptanceServiceTypeIdS',{
				acceptanceServiceTypeId:this.acceptanceServiceTypeId,
				acceptanceCategoryDetailsId:this.acceptanceCategoryDetailsId=='null'?'':this.acceptanceCategoryDetailsId
			}).then(res=>{
				// console.log(res,'res')
				if(res.code==200){
					console.log(res);
					this.title=res.data.oneName;
					this.ServiceTypeName = res.data.twoName;
					if(res.data.acceptanceCategoryDetails !='null')
					{
						this.replyCon=res.data.acceptanceCategoryDetails.problemDetails;
						
						let url=res.data.acceptanceCategoryDetails.problemUrl.split(',');
						if(url.length>0)
						{
							url.map(i=>{
								this.fileList.push({
									url:i
								})
							})
						}
					}
					
					
				}else{
					this.$u.toast(res.msg);
				}
			})
			
		},
		delectPic(index){
			this.fileList.splice(index,1);
		},
		success(file){
			this.fileList.push({url:file.url})
		},
		sure(){
			if(this.replyCon ==''){
				this.$u.toast('请填写验收问题回复');
				return;
			}
			let arr=[];
			
			this.fileList.map(item=>{
				arr.push(item.url)
			})
			let overviewConstructionUrl=arr.join(",");
			const acceptanceServiceTypeId = uni.getStorageSync('acceptanceServiceTypeId');
			this.$http('version.updatequality',{
				acceptanceServiceTypeId:acceptanceServiceTypeId,
				problemDetails:this.replyCon,
				problemUrl:overviewConstructionUrl,
				acceptanceServiceId:this.acceptanceServiceId
			}).then(res=>{
				if(res.code==200){
					uni.navigateTo({
						url:'pages/onSite/onSiteIndex/checkEx/checkEx?rate='+this.rate
					})
				}else{
					this.$u.toast(res.msg);
				}
			})
			
		},
	},
  };
</script>

<style scoped lang="scss">
  .page {
    background-color: #f6f7f9;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
  }
  .group {
    flex: 1 1 auto;
    overflow-y: auto;
  }
  .section_1 {
    padding: 29rpx 32rpx 42rpx;
    background-color: #ffffffff;
  }
  .section_2 {
    margin-top: 20rpx;
    padding: 29rpx 31rpx 48rpx;
    background-color: #ffffffff;
  }
  .text_1 {
    color: #191919;
    font-size: 32rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 38rpx;
	font-weight: 600;
  }
  .text_2 {
    margin-top: 39rpx;
    color: #191919;
    font-size: 32rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 38rpx;
  }
  .button {
    margin-top: 255rpx;
    padding: 26rpx  31rpx;
    background-color: #1d6aff;
    border-radius: 44rpx;
  }
  .text_3 {
    align-self: flex-start;
    color: #191919;
    font-size: 32rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 38rpx;
	font-weight: 600;
  }
  .text-wrapper {
    margin-top: 35rpx;
    padding: 23rpx 0 ;
    border-radius: 16rpx;
	font-size: 26rpx;
	padding-left: 20rpx;
    background-image: url($IMG_URL+'16557870924533882008.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
  .group_2 {
    padding-top: 31rpx;
    position: relative;
  }
  .text_5 {
    color: #ffffff;
    font-size: 32rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 38rpx;
  }
  .text_4 {
    margin-left: 25rpx;
    color: #bfbfbf;
    font-size: 28rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 33rpx;
  }
  .image_1 {
    border-radius: 16rpx;
    position: absolute;
    left: 1rpx;
    bottom: 0;
    width: 214rpx;
    height: 214rpx;
  }
  .image_2 {
    width: 214rpx;
    height: 214rpx;
  }
  
  textarea{
	  color: #666;
	  font-size: 28rpx;
  }
</style>